<template>

  <div>
    <div class="template_title">

      电影推荐

    </div>
    <div style="text-align: left">

      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" title="编辑电影">

        <el-form-item label="推荐方式" prop="selectedTypeList">
          <el-checkbox-group v-model="ruleForm.selectedTypeList">
            <el-checkbox v-for="type in typeList" :id="type.id + ''" :label="type.id" name="selectedTypeList">
              {{ type.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="备注:" prop="description">
          <el-col :span="12">
            系统会按照已选中的类型顺序推荐
          </el-col>
        </el-form-item>

        <el-form-item style="width: 600px; text-align: center">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "RecommendList",
  data() {
    return {
      typeList: [], // 存储所有的推荐类型

      ruleForm: {
        selectedTypeList: [], // 上次设置时选中的类型列表,用于在页面上回显
      },
      rules: {

        selectedTypeList: [
          {type: 'array', required: true, message: '请至少选择一个区域', trigger: 'change'}
        ],

      }
    };
  },
  methods: {

    submitForm(formName) {
      let self = this

      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("submitForm --selectedTypeList-- " + this.ruleForm.selectedTypeList);
          this.$http.get("/api/recommendType/nowRecommend?ids=" + this.ruleForm.selectedTypeList)
              .then(res => {
                this.$message.success("提交成功!!")
              }).catch(res => {
            this.$message.error("提交失败,请重试!")
          })
        } else {
          console.log('保存失败!!');
          this.$message.error("验证失败,请重试!")
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  created() {
    this.$http.get("/api/recommendType/findAll")
        .then(res => {
          // 把返回的类型列表赋值给data中定义的typeList,便于在页面上显示
          this.typeList = res.data
          // 把所有已经被选中的类型存到 data中定义的 seletedTypeList中
          // 定义一个变量j用于作为selectedTypeList的索引
          let j = 0
          for (let i = 0; i < this.typeList.length; i++) {
            let type = this.typeList[i]
            if (type.isrecommend) {
              this.ruleForm.selectedTypeList[j] = type.id
              j++
            }

          }
          console.log("this.selectedTypeList===" + this.selectedTypeList);
        })
  }
}
</script>

<style scoped>
#el-input {
  width: 400px;
}

.template_title {
  line-height: 40px;
  width: 500px;
  text-align: center;
  height: 60px;
  margin-top: 0px;
  font-size: 24px;
  color: #226655;
}
</style>
